<template>
  <div class="content">
    <button @click="flag = !flag">switch</button>
    <!-- 引用gsap插件进行动画效果 -->
    <transition
      @before-enter="EnterFrom"
      @enter="EnterActive"
      @leave="LeaveActive"
      >
      <div v-if="flag" class="box"></div>
    </transition>
    
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import gsap from "gsap"

const flag = ref<boolean>(true)

const EnterFrom = (el:Element) => {
  console.log("进入之前", el)
  gsap.set(el, {
    width: 0,
    height: 0
  })
}

const EnterActive = (el:Element, done: gsap.Callback) => {
  console.log("过渡曲线", el)
  gsap.to(el, {
    width: 200,
    height: 200,
    duration: 2,
    ease: "elastic.out(1, 0.3)",
    onComplete: done
  })
}

const LeaveActive = (el:Element, done: gsap.Callback) => {
  console.log("离开曲线", el)
  gsap.to(el, {
    width: 0,
    height: 0,
    duration: 2,
    ease: "elastic.out(0.3, 1)",
    onComplete: done
  })
}

</script>

<style lang="scss" scoped>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>